<template>
  <view class="scan-finish">
    <view class="beginScan">
      <camera
        device-position="back"
        :flash="light"
        mode="scanCode"
        @error="error"
        style="width: 100%; height: 300rpx"
        @scancode="over"
      >
        <div class="qr-scanner">
          <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
          </div>
        </div>
      </camera>

      <view class="light">
        <view style="margin-right: 5rpx">闪光灯</view>
        <u-switch
          v-model="switchlight"
          :size="40"
          @change="changeLight"
        ></u-switch>
      </view>

      <view class="tipe">请将相机正对着包裹上的条形码</view>
      <view class="tipe1"
        >扫描成功将会展示对应的包裹信息，请核对信息无误后完成配送</view
      >
    </view>

    <!-- <view>{{ scanContent }}</view> -->

    <!-- 展示包裹信息 -->
    <view class="box-info">
      <view class="info-list">
        <view>姓名</view>
        <view>{{ boxInfo.userInfo[0] }}</view>
      </view>
      <view class="info-list">
        <view>电话</view>
        <view>{{ boxInfo.userInfo[4] }}</view>
      </view>
      <view class="info-list">
        <view>取货码</view>
        <view>{{ boxInfo.orderInfoBoxcode }}</view>
      </view>
      <view class="info-list">
        <view>楼栋</view>
        <view>{{ boxInfo.userInfo[2] }}</view>
      </view>
      <view class="info-list">
        <view>宿舍号</view>
        <view>{{ boxInfo.userInfo[3] }}</view>
      </view>
      <view class="info-list">
        <view>站点</view>
        <view>{{ boxInfo.site }}</view>
      </view>
      <view class="info-list">
        <view>包裹大小</view>
        <view>{{ boxInfo.boxSize }}</view>
      </view>
      <view class="info-list">
        <view>包裹金额</view>
        <view>{{ boxInfo.boxPrice }}</view>
      </view>
      <view class="info-list">
        <view>包裹订单号</view>
        <view>{{ boxInfo.boxOrderNum }}</view>
      </view>
      <view class="info-list">
        <view>包裹取货时间</view>
        <view>{{ boxInfo.boxSendTime == null ? '包裹暂未取货':boxInfo.boxSendTime }}</view>
      </view>
      <view class="dis">{{ boxInfo.orderInfoRemark }}</view>

      <!-- <u-steps
        :list="numList"
        mode="number"
        direction="column"
        :current="1"
      ></u-steps> -->

    </view>

    <view class="sure" @click="peisongShow = true">确认无误,配送完成</view>

    <u-modal
      v-model="peisongShow"
      title="配送完成提示"
      :show-cancel-button="true"
      confirm-text="已确认"
      cancel-text="再看看"
      @confirm="submitPeiSongFinish"
      :title-style="{ color: 'red' }"
      content="确认已完成该包裹配送，确认之前请核对是否有误"
    ></u-modal>
  </view>
</template>

<script>
//快递类型
const PriceMap = new Map();
// 快递站点
const KuaidiMap = new Map();
// 快递价格
const PMap = new Map();

export default {
  data() {
    return {
      scanContent: "",
      peisongShow: false, //配送提示弹窗
      light: "off",
      switchlight: false, //闪光灯
      is: true, //是否正在操作
      boxInfo: {}, //扫码获取到的信息
      theOrderInfoNum: "", //包裹订单号
      numList: [
        {
          name: "下单",
        },
        {
          name: "出库",
        },
        {
          name: "运输",
        },
        {
          name: "签收",
        },
      ],
    };
  },
  onLoad() {
    this.getAllPriceList()
      .then(() => {
        return this.getAllKuaidiList();
      })
      .then(() => {
        console.log(PriceMap);
        console.log(KuaidiMap);
        console.log(PMap);
      });
  },
  methods: {
    //通过扫码 来通过订单号 获取该包裹信息
    over(e) {
      console.log(e);
      if (this.is) {
        // 首先 需要判断订单号是否符合要求
        //将改为 false 是为了 扫码操作太频繁，只有请求结果返回来了 才能再一次进行操作
        this.is = false;
        //获取条形码 中的包裹订单号
        this.scanContent = e.detail.result;

        //将包裹订单号存起来
        this.theOrderInfoNum = this.scanContent;

        var form = {
          boxOrderNum: this.scanContent,
          // boxStatus: "DELIVERY_FINISH",
        };
        this.$u.api
          .getBoxInfoByBoxOrderNumApi(form)
          .then((res) => {
            this.$u.toast("信息获取成功");
            // 数据处理
            // 用户信息
            res.orderInfo.userInfo = res.orderInfo.address.split("/");
            //包裹大小
            res.orderInfo.boxSize = PriceMap.get(res.orderInfo.boxPriceId);
            //包裹价格
            res.orderInfo.boxPrice = PMap.get(res.orderInfo.boxPriceId);
            //快递
            res.orderInfo.site = KuaidiMap.get(res.orderInfo.kuaidiId);

            this.boxInfo = res.orderInfo;
            console.log(res.orderInfo);
            this.is = true;
          })
          .catch((err) => {
            this.boxInfo = {
              boxOrderNum: "",
              boxPrice: "",
              site: "",
              orderInfoRemark: "",
              boxSize: "",
              userInfo: ["", "", "", "", "", ""],
              orderInfoBoxcode: "",
            };
            this.is = true;
          });
      }
    },
    changeLight(e) {
      if (e) {
        this.light = "on";
      } else {
        this.light = "off";
      }
    },

    /**
     * 获取快递站点
     */
    getAllPriceList() {
      return new Promise((resolve) => {
        this.$u.api
          .getAllPriceApi({ schoolId: this.vuex_userInfo.schoolId })
          .then((res) => {
            this.allPriceList = res.priceList;
            res.priceList.map((v) => {
              PriceMap.set(v.boxPriceId, v.boxPriceName);
              PMap.set(v.boxPriceId, v.boxPrice);
            });
            resolve();
          });
      });
    },

    /**
     * 获取价格
     */
    getAllKuaidiList() {
      return new Promise((resolve) => {
        this.$u.api
          .getKuaidiBySchoolApi({ schoolId: this.vuex_userInfo.schoolId })
          .then((res) => {
            this.allKuaidiList = res.kuaidiList;
            res.kuaidiList.map((v) => {
              KuaidiMap.set(v.kuaidiId, v.luaidiName);
            });
            resolve();
          });
      });
    },

    /**
     * 配送完成
     */
    submitPeiSongFinish() {
      // 需要验证是否已经扫码
      if (this.theOrderInfoNum.length > 0) {
        var form = {
          boxOrderNum: this.theOrderInfoNum,
          boxStatus: "DELIVERY_FINISH",
        };
        this.$u.api.changeOrderInfoStatusApi(form).then((res) => {
          uni.showToast({
            title: "配送完成",
            duration: 2000,
          });
          // 清空扫码信息
          this.boxInfo = {
            boxOrderNum: "",
            boxPrice: "",
            site: "",
            orderInfoRemark: "",
            boxSize: "",
            userInfo: ["", "", "", "", "", ""],
            orderInfoBoxcode: "",
          };
          // 以及保存的包裹订单号
          this.theOrderInfoNum = "";
        });
        // .catch((err) => {
        //   // 删除错误的包裹订单号
        //   this.theOrderInfoNum = "";
        //   this.$u.toast("操作失败");
        // });
      } else {
        this.$u.toast("请先完成扫码");
      }
    },
  },
};
</script>

<style scoped lang ='scss' >
.scan-finish {
  width: 100vw;
  min-height: 100vh;
  background-color: #eff5f7;
  .beginScan {
    height: auto;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    background-color: #adb838;
    padding: 30rpx;

    position: fixed;
    top: 0;
    width: 100%;
    .light {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10rpx;
    }
    .tipe {
      margin-top: 30rpx;
    }
    .tipe1 {
      margin-top: 10rpx;
      font-size: 20rpx;
    }
    .qr-scanner {
      background-image: linear-gradient(
          0deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent
        ),
        linear-gradient(
          90deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent
        );
      background-size: 3rem 3rem;
      background-position: -1rem -1rem;
      width: 100%;
      height: 100%;
      position: relative;
      /* background-color: #111; */
    }
    .qr-scanner .box {
      /* width: 75vw;
      height: 75vw; */
      width: 100%;
      height: 100%;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      border: 0.1rem solid rgba(0, 255, 51, 0.2);
    }
    .qr-scanner .line {
      height: calc(100% - 2px);
      width: 100%;
      background: linear-gradient(
        180deg,
        rgba(0, 255, 51, 0) 43%,
        #00ff33 211%
      );
      border-bottom: 3px solid #00ff33;
      transform: translateY(-100%);
      animation: radar-beam 2s infinite;
      animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
      animation-delay: 1.4s;
    }
    .qr-scanner .box:after,
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
      content: "";
      display: block;
      position: absolute;
      width: 3vw;
      height: 3vw;
      border: 0.2rem solid transparent;
    }
    .qr-scanner .box:after,
    .qr-scanner .box:before {
      top: 0;
      border-top-color: #00ff33;
    }
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
      bottom: 0;
      border-bottom-color: #00ff33;
    }
    .qr-scanner .box:before,
    .qr-scanner .angle:before {
      left: 0;
      border-left-color: #00ff33;
    }
    .qr-scanner .box:after,
    .qr-scanner .angle:after {
      right: 0;
      border-right-color: #00ff33;
    }
    @keyframes radar-beam {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
  .box-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40rpx;
    background-color: #eff5f7;
    margin-bottom: 100rpx;

    margin-top: 510rpx;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 2;

    .info-list {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dbdce0;
      height: 100rpx;
      & > view:nth-child(1) {
        color: #666;
      }
      & > view:nth-child(2) {
        color: #000000;
        font-weight: bold;
      }
    }
    .dis {
      text-align: justify;
      text-indent: 2rem;
      padding: 20rpx 0;
      color: #666;
      /* border-bottom: 1px solid #dbdce0; */
    }
  }
  .sure {
    height: 100rpx;
    background-color: #adb838;
    color: #ffffff;
    font-size: 36rpx;
    font-weight: bold;
    line-height: 100rpx;
    text-align: center;
    width: 100vw;
    position: fixed;
    bottom: 0rpx;
    z-index: 4;
  }
}
</style>
